<template>
<div>
  <div class="headl">
    <p><i class="icon  icon-firefox  icon-3x"></i>不挂科视频点播网站</p>
  </div>

 <div class="headr">
<el-menu  :default-active="activeIndex" class="el-menu-demo headru" mode="horizontal" @select="handleSelect">
  <el-menu-item index="1"><router-link to="/">首页</router-link></el-menu-item>
  <el-menu-item index="2"><router-link to="/find">搜索</router-link></el-menu-item>
  <el-menu-item index="3" v-show="upower==1|| upower==2" ><router-link to="/Comvideo">审核视频</router-link></el-menu-item>
  <el-submenu index="4" v-show="uid !='' ">
    <template slot="title">个人中心</template>
        <el-submenu index="4-4">
      <template slot="title">我的</template>
      <router-link to="/User"><el-menu-item index="3-4-1">我的主页</el-menu-item></router-link>
      <el-menu-item index="4-4-2">我的下载</el-menu-item>
      <el-menu-item index="4-4-3">我的上传</el-menu-item>
    </el-submenu>
    <router-link to="/VideoUP"><el-menu-item index="3-1">上传视频</el-menu-item></router-link>
    <el-menu-item index="4-2" @click="exit()">退出</el-menu-item>
  </el-submenu>
  <el-menu-item index="5" v-show="uid =='' "><router-link to="/login">登录</router-link></el-menu-item>
</el-menu>

 </div>
</div>
</template>



<script >

export default {
  name: 'heade',
   data() {
      return {
        activeIndex: '1',
        activeIndex2: '1',
        upower:'',
        uid:''
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      exit(){
        window.localStorage.setItem('uid',"")
        window.localStorage.setItem('utype',"")
         this.$router.push({
                  path:"/",
              })
      },
      autoRun() {
        this.timer = setInterval(() => {
            this.upower=window.localStorage.getItem('utype')
            this.uid=window.localStorage.getItem('uid')
        }, 1000);
        },
    },
    mounted() {
      this.autoRun()
    }
  }

</script>

<style >
	@import '../assets/css/zui.css';
    .headl{
        position: fixed;
        top: 8px;
        left: 10px;
        z-index: 1000;
        background-color: #fff;
        border-radius: 25px; 
        width: 280px;
        height: 61px;    
    }
    .headl p{
      margin: 5px;
      font-size: 25px;
      line-height: 41px;
      font-weight: bolder;
    }
    .headr{
        position: fixed;
        top: 8px;
        right: 10px;
        z-index: 1000;
    }
    .headru{
        border-radius: 25px;
    }
    .headru li,div{
        border-radius: 25px;
    }
</style>
